<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Bootstrap 优站精选 - 表格布局</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    
    table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
    }
    
    td, th {
      border: 3px solid #333;
      padding: 10px;
      text-align: center;
    }
    
    .header-table td {
      background-color: #f0f0f0;
      height: 60px;
    }
    
    .hero-table td {
      background-color: #e0e0e0;
      height: 120px;
    }
    
    .content-table td {
      background-color: #f8f8f8;
      height: 200px;
    }
    
    .pagination-table td {
      background-color: #e8e8e8;
      height: 60px;
    }
    
    .footer-table td {
      background-color: #d0d0d0;
      height: 100px;
    }
    
    .website-grid-table td {
      background-color: #fafafa;
      height: 150px;
    }
    
    .main-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 15px;
    }
    
    h1 {
      margin: 0;
      font-size: 24px;
    }
    
    .text-center {
      text-align: center;
    }
    
    .text-right {
      text-align: right;
    }
    
    .btn {
      display: inline-block;
      padding: 8px 16px;
      background-color: #007bff;
      color: white;
      text-decoration: none;
      border-radius: 4px;
    }
    
    .btn:hover {
      background-color: #0056b3;
    }
    
    .pagination {
      display: inline-block;
    }
    
    .pagination a {
      display: inline-block;
      padding: 8px 12px;
      margin: 0 4px;
      text-decoration: none;
      border: 1px solid #ddd;
      color: #007bff;
    }
    
    .pagination a.active {
      background-color: #007bff;
      color: white;
    }
    
    .website-card {
      border: 1px solid #ccc;
      padding: 10px;
      background-color: white;
    }
    
    .website-img {
      height: 100px;
      background-color: #eee;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>

<body>
  <!-- Header -->
  <table class="header-table">
    <tr>
      <td>
        <div class="main-container">
          <table style="border: none;">
            <tr>
              <td style="border: none; text-align: left; width: 70%;">
                <h1>Bootstrap 优站精选</h1>
              </td>
              <td style="border: none; text-align: right; width: 30%;">
                <a href="/submit/" class="btn">提交站点</a>
              </td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </table>

  <!-- Hero Section -->
  <table class="hero-table">
    <tr>
      <td>
        <div class="main-container text-center">
          <p>Hero背景区域（带装饰圆点）</p>
        </div>
      </td>
    </tr>
  </table>

  <!-- Websites Grid -->
  <table style="margin-top: -64px;">
    <tr>
      <td>
        <div class="main-container">
          <table class="website-grid-table">
            <tr>
              <td colspan="2">
                <p class="text-center"><strong>网站展示区域</strong></p>
              </td>
            </tr>
            <tr>
              <td style="width: 50%;">
                <div class="website-card">
                  <div class="website-img">网站图片</div>
                  <p>网站标题</p>
                </div>
              </td>
              <td style="width: 50%;">
                <div class="website-card">
                  <div class="website-img">网站图片</div>
                  <p>网站标题</p>
                </div>
              </td>
            </tr>
            <tr>
              <td style="width: 50%;">
                <div class="website-card">
                  <div class="website-img">网站图片</div>
                  <p>网站标题</p>
                </div>
              </td>
              <td style="width: 50%;">
                <div class="website-card">
                  <div class="website-img">网站图片</div>
                  <p>网站标题</p>
                </div>
              </td>
            </tr>
            <tr>
              <td style="width: 50%;">
                <div class="website-card">
                  <div class="website-img">网站图片</div>
                  <p>网站标题</p>
                </div>
              </td>
              <td style="width: 50%;">
                <div class="website-card">
                  <div class="website-img">网站图片</div>
                  <p>网站标题</p>
                </div>
              </td>
            </tr>
            <tr>
              <td style="width: 50%;">
                <div class="website-card">
                  <div class="website-img">网站图片</div>
                  <p>网站标题</p>
                </div>
              </td>
              <td style="width: 50%;">
                <div class="website-card">
                  <div class="website-img">网站图片</div>
                  <p>网站标题</p>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </table>

  <!-- Pagination -->
  <table class="pagination-table">
    <tr>
      <td>
        <div class="main-container text-center">
          <div class="pagination">
            <a href="#">&laquo;</a>
            <a href="#" class="active">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">&raquo;</a>
          </div>
        </div>
      </td>
    </tr>
  </table>

  <!-- Footer -->
  <table class="footer-table">
    <tr>
      <td>
        <div class="main-container">
          <table style="border: none;">
            <tr>
              <td style="border: none; width: 60%; text-align: left;">
                <h3>提交你的站点</h3>
                <p>如果你的网站基于 Bootstrap 构建、并且用心的设计，那就请提交给我们并在这里展示吧！</p>
              </td>
              <td style="border: none; width: 40%; text-align: right;">
                <a href="/submit/" class="btn">提交站点</a>
              </td>
            </tr>
            <tr>
              <td style="border: none; text-align: left;">
                &copy; 2024 Bootstrap 优站精选
              </td>
              <td style="border: none; text-align: right;">
                <a href="/about/">关于</a> |
                <a href="/guanggao/">广告合作</a> |
                <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备15031610号-1</a>
              </td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>